<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div :class="classObject"></div>
    <!-- <div :class="[activeClass, errorClass]"></div> -->

    <script type="text/javascript">
        //1.对象语法
        const classObjectVM = Vue.createApp({
            data() {
                return {
                    classObject: {
                        active: true,
                        'text-danger': false
                    }
                }
            },
            // data2() {
            //     return {
            //         activeClass: 'active',
            //         errorClass: 'text-danger'
            //     }
            // },

            computed: {
                classObject() {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            }
        });

        
    </script>

</body>

</html>